<template>

  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" :rules="formRules" label-width="200px">
      <!--添加门店-->
      <div class="common-form">修改運費模板</div>
      <el-form-item label="模板名稱" prop="name"><el-input v-model="form.name" class="max-w460"></el-input></el-form-item>
      <el-form-item label="計費方式">
        <div>
          <el-radio v-model="form.method" :label="10">按件數</el-radio>
          <el-radio v-model="form.method" :label="20">按重量</el-radio>
        </div>
      </el-form-item>

      <el-form-item label="配送區域及運費">
        <el-table :data="form.rule" border style="width: 100%;">
          <el-table-column label="可配送區域">
            <template #default="scope">
              <div class="area-list">
                <span v-if="scope.row.citys.length == cityCount">全國</span>
                <span v-else v-for="(province, index) in scope.row.showData" :key="index" class="pr16">
                  {{ province.name }}
                  <template v-if="!province.isAllCitys">
                    (
                    <span class="am-link-muted gray9">
                      <em v-for="(city, city_index) in province.citys" :key="city_index">
                        <span>{{ city.name }}</span>
                        <span v-if="city_index + 1 < province.citys.length">、</span>
                      </em>
                    </span>
                    )
                  </template>
                </span>
              </div>
              <a href="javascript:void(0);" @click="el = editAreaClick(scope.$index)">編輯</a>
            </template>
          </el-table-column>
          <el-table-column prop="first" :label="tableHeadName.first" width="100px">
            <template #default="scope">
              <el-input v-model="scope.row['first']"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="firstFee" :label="tableHeadName.firstFee" width="100px">
            <template #default="scope">
              <el-input v-model="scope.row['firstFee']"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="additional" :label="tableHeadName.additional" width="100px">
            <template #default="scope">
              <el-input v-model="scope.row['additional']"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="additionalFee" :label="tableHeadName.additionalFee" width="100px">
            <template #default="scope">
              <el-input v-model="scope.row['additionalFee']"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="60px">
            <template #default="scope">
              <a href="javascript:void(0);" @click="deleteAreaClick(scope.$index)">刪除</a>
            </template>
          </el-table-column>
        </el-table>
        <div><el-button @click="addAreaClick" type="text" size="small">+點擊新增可配送區域和運費</el-button></div>
      </el-form-item>

      <el-form-item label="排序">
        <el-input v-model="form.sort" type="number" class="max-w460"></el-input>
        <div class="tips">數字越小越靠前</div>
      </el-form-item>

      <!--提交-->
      <div class="common-button-wrapper"><el-button type="primary" @click="onSubmit" :loading="loading">提交</el-button></div>
    </el-form>

    <!--区域 -->
    <Areas v-if="show_area" :show_area="show_area" :areaModel="areaModel" :areas="options" @closeArea="closeAreaFunc"></Areas>
  </div>
</template>

<script>
import SettingApi from '@/api/setting.js';
import Areas from './dialog/Area.vue';
import { deepClone } from '@/utils/base';
export default {
  components: {
    Areas: Areas
  },
  data() {
    return {
      /*form表单数据*/
      form: {
        deliveryId: 0,
        method: 10,
        name: '',
        sort: 1,
        rule: []
      },
      formRules: {
        name: [{
          required: true,
          message: ' ',
          trigger: 'blur'
        }]
      },
      loading: false,
      /*区域数据源*/
      options: [],
      /*区域数据源*/
      optionsMap: {},
      /*区域选中的model*/
      areaModel: {
        index: 0
      },
      /*显示区域选中*/
      show_area: false,
      /*表格标题名称*/
      tableHeadName: {
        first: "首件(個)",
        firstFee: "運費(元)",
        additional: "續件(個)",
        additionalFee: "續費(元)"
      },
      cityCount: 0,
      formData: []
    };
  },
  watch: {
    'form.method': function (n, o) {
      if (n == 10) {
        this.tableHeadName = {
          first: "首件(個)",
          firstFee: "運費(元)",
          additional: "續件(個)",
          additionalFee: "續費(元)"
        };
      } else {
        this.tableHeadName = {
          first: "首重(Kg)",
          firstFee: "運費(元)",
          additional: "續重(Kg)",
          additionalFee: "續費(元)"
        };
      }
    },
    'form.rule': {
      handler(val, oldVal) {},
      // 这里是关键，代表递归监听 items 的变化
      deep: true
    }
  },
  created() {
    // 取到路由带过来的参数
    this.form.deliveryId = this.$route.query.deliveryId;
    this.getData();
  },
  methods: {
    getData() {
      let self = this;
      SettingApi.toEditDelivery({
        deliveryId: self.form.deliveryId
      }, true).then(res => {
        self.options = res.data.regionData;
        self.cityCount = res.data.cityCount;
        self.form = res.data.detail;
        self.form.rule = [];
        self.formData = res.data.formData;
        //区域转数组
        self.options.forEach(function (area) {
          self.optionsMap[area.id] = area;
          area.children.forEach(function (child) {
            child.index = child.childIndex;
          });
        });
        if (!self.formData.length) return false;
        self.formData.forEach(function (form) {
          // 转换为整数型
          for (var key in form.citys) {
            if (form.citys.hasOwnProperty(key)) {
              form.citys[key] = parseInt(form.citys[key]);
            }
          }
          form['showData'] = self.getShowData({
            province: form.province,
            citys: form.citys
          });
          self.form.rule.push(form);
        });
      }).catch(error => {
        console.log(error);
      });
    },
    // 格式化选中的区域id
    getShowData: function (checkedData) {
      var self = this;
      var formData = {};
      checkedData.province.forEach(function (provinceId) {
        var province = self.optionsMap[provinceId],
          citys = [],
          cityCount = 0;
        for (var cityIndex in province.children) {
          if (province.children.hasOwnProperty(cityIndex)) {
            var cityItem = province.children[cityIndex];
            if (self.inArray(cityItem.id, checkedData.citys)) {
              citys.push({
                id: cityItem.id,
                name: cityItem.name
              });
            }
            cityCount++;
          }
        }
        formData[province.id] = {
          id: province.id,
          name: province.name,
          citys: citys,
          isAllCitys: citys.length === cityCount
        };
      });
      return formData;
    },
    // 数组中是否存在指定的值
    inArray: function (val, array) {
      return array.indexOf(val) > -1;
    },
    /*添加区域*/
    addAreaClick(e) {
      this.areaModel.index = this.form.rule.length;
      this.areaModel.type = 'add';
      this.show_area = true;
    },
    /*编辑区域*/
    editAreaClick(e) {
      this.areaModel.index = e;
      this.areaModel.type = 'edit';
      this.show_area = true;
    },
    /*关闭区域选中弹窗*/
    closeAreaFunc(e) {
      let self = this;
      this.show_area = e.statu;
      if (e.type != 'confirm') {
        return;
      }
      this.options = e.this_area;
      let provinces = [];
      let citys = [];
      e.this_area.forEach(function (province, index) {
        if ((province.checked == true || province.indeterminate == true) && province.index.indexOf(self.areaModel.index) != -1) {
          provinces.push(province['id']);
          province.children.forEach(function (city) {
            if (city.checked == true && city.index == self.areaModel.index) {
              citys.push(city['id']);
            }
          });
        }
      });
      if (this.areaModel.type == 'add') {
        this.form.rule.push({
          first: '',
          firstFee: '',
          additional: '',
          additionalFee: '',
          citys: citys,
          province: provinces,
          showData: this.getShowData({
            province: provinces,
            citys: citys
          })
        });
      }
      if (this.areaModel.type == 'edit') {
        this.form.rule[this.areaModel.index]['showData'] = this.getShowData({
          province: provinces,
          citys: citys
        });
        //设置rule的region
        this.form.rule[this.areaModel.index]['citys'] = citys;
      }
      //更新表格变通做法
      this.form.rule.push([]);
      this.form.rule.pop();
    },
    /*删除*/
    deleteAreaClick(e) {
      let self = this;
      self.options.forEach(function (province) {
        if (self.inArray(province['id'], self.form.rule[e].province)) {
          province.checked = false;
          province.index = null;
        }
        province.children.forEach(function (city) {
          if (self.inArray(city['id'], self.form.rule[e].citys)) {
            city.checked = false;
            city.index = null;
          }
        });
      });
      self.form.rule.splice(e, 1);
    },
    //修改提交表单
    onSubmit() {
      let self = this;
      let form = deepClone(self.form);

      //移除showData
      form.rule.forEach(function (rule) {
        delete rule.showData;
      });
      self.$refs.form.validate(valid => {
        if (valid) {
          if (form.rule.length == 0) {
            ElMessage({
              message: "請新增配送區域和運費",
              type: 'error'
            });
            return false;
          }
          for (let key in form.rule) {
            if (!form.rule[key].hasOwnProperty('first') || !(form.rule[key].first > 0)) {
              ElMessage({
                message: "首件/首重不能為空",
                type: 'error'
              });
              return false;
            }
            if (!form.rule[key].hasOwnProperty('firstFee') || form.rule[key].firstFee == '') {
              ElMessage({
                message: "運費不能為空",
                type: 'error'
              });
              return false;
            }
            if (!form.rule[key].hasOwnProperty('additional') || !(form.rule[key].additional > 0)) {
              ElMessage({
                message: "續件/續重不能為空",
                type: 'error'
              });
              return false;
            }
            if (!form.rule[key].hasOwnProperty('additionalFee') || form.rule[key].additionalFee == '') {
              ElMessage({
                message: "續費不能為空",
                type: 'error'
              });
              return false;
            }
            form.rule[key]['region'] = form.rule[key]['citys'].join(',');
            delete form.rule[key]['citys'];
          }
          self.loading = true;
          SettingApi.editDelivery(form, true).then(data => {
            self.loading = false;
            ElMessage({
              message: "恭喜您，修改成功",
              type: 'success'
            });
            self.$router.push('/setting/delivery/index');
          }).catch(error => {
            self.loading = false;
          });
        }
      });
    }
  }
};
</script>

<style>
.tips {
  color: #ccc;
}

.el-table__header-wrapper {
  line-height: 23px;
}

.el-table .area-list {
  font-size: 12px;
}

.el-table .area-list .province {
  padding-right: 10px;
  font-weight: bold;
}

.el-table .area-list .city {
  display: inline-block;
  white-space: nowrap;
  padding-right: 4px;
  color: #999;
}
</style>

